<template>
  <MainLayout>
    <div class="dashboard-content">
      <!-- 欢迎信息 -->
      <div class="welcome-section">
        <div class="welcome-info">
          <h1>欢迎回来，{{ authStore.user?.username }}！</h1>
          <p>您当前的身份是：{{ getRoleText(authStore.user?.role) }}</p>
          <p class="welcome-time">{{ getCurrentTime() }}</p>
        </div>
        <div class="welcome-avatar">
          <el-avatar :size="80" :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${authStore.user?.username}`" />
        </div>
        <el-alert
          v-if="authStore.getIsTestMode()"
          title="测试模式"
          type="warning"
          description="当前处于测试模式，所有数据均为模拟数据，无需后端服务器。"
          show-icon
          :closable="false"
          class="test-mode-alert"
        />
      </div>

      <!-- 导航菜单 -->
      <div class="navigation-section">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="nav in navigationItems" :key="nav.key">
            <el-card class="nav-card" @click="handleNavigation(nav.key)">
              <div class="nav-content">
                <div class="nav-icon" :class="nav.iconClass">
                  <el-icon><component :is="nav.icon" /></el-icon>
                </div>
                <div class="nav-info">
                  <h3>{{ nav.title }}</h3>
                  <p>{{ nav.description }}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-section">
        <h2 class="section-title">数据概览</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="stat in userStatsDisplay" :key="stat.key">
            <el-card class="stat-card" :class="stat.cardClass">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">{{ stat.label }}</p>
                  <h3 class="stat-value">{{ stat.value }}</h3>
                  <p class="stat-trend" :class="stat.trendClass">
                    <el-icon><component :is="stat.trendIcon" /></el-icon>
                    {{ stat.trend }}
                  </p>
                </div>
                <div class="stat-icon" :class="stat.iconClass">
                  <el-icon><component :is="stat.icon" /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 快速操作 -->
      <div class="quick-actions-section">
        <h2 class="section-title">快速操作</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="action in quickActions" :key="action.key">
            <el-card class="action-card" @click="handleQuickAction(action.key)">
              <div class="action-content">
                <div class="action-icon" :class="action.iconClass">
                  <el-icon><component :is="action.icon" /></el-icon>
                </div>
                <div class="action-info">
                  <h3>{{ action.title }}</h3>
                  <p>{{ action.description }}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activities-section">
        <h2 class="section-title">最近活动</h2>
        <el-card>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
              :color="getActivityColor(activity.type)"
            >
              <div class="activity-content">
                <span class="activity-text">{{ activity.content }}</span>
                <el-tag :type="activity.tagType" size="small">{{ activity.tag }}</el-tag>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>

      <!-- 系统状态 -->
      <div v-if="authStore.user?.role === 'admin'" class="system-status-section">
        <h2 class="section-title">系统状态</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-card class="status-card">
              <div class="status-header">
                <h3>服务器状态</h3>
                <el-tag :type="systemStatus === '正常' ? 'success' : systemStatus === '警告' ? 'warning' : 'danger'" size="small">
                  {{ systemStatus }}
                </el-tag>
              </div>
              <div class="status-content">
                <p>运行时间: <span class="status-value">{{ systemUptime }}小时</span></p>
                <p>在线用户: <span class="status-value">{{ onlineUsers }}</span></p>
                <p>CPU使用率: <span class="status-value">{{ systemCpu.toFixed(1) }}%</span></p>
                <p>内存使用率: <span class="status-value">{{ systemMemory.toFixed(1) }}%</span></p>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="8">
            <el-card class="status-card">
              <div class="status-header">
                <h3>系统概览</h3>
                <el-tag type="info" size="small">实时数据</el-tag>
              </div>
              <div class="status-content">
                <p>题目总数: <span class="status-value">{{ adminStats.totalProblems }}</span></p>
                <p>提交总数: <span class="status-value">{{ adminStats.totalSubmissions }}</span></p>
                <p>用户总数: <span class="status-value">{{ adminStats.totalUsers }}</span></p>
                <p>通过率: <span class="status-value">{{ adminStats.successRate }}%</span></p>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="8">
            <el-card class="status-card">
              <div class="status-header">
                <h3>活动统计</h3>
                <el-tag type="info" size="small">24小时内</el-tag>
              </div>
              <div class="status-content">
                <p>最近提交: <span class="status-value">{{ dashboardStats.recentSubmissions }}</span></p>
                <p>待批改: <span class="status-value">{{ dashboardStats.pendingSubmissions }}</span></p>
                <p>系统活动: <span class="status-value">{{ adminStats.recentActivities }}</span></p>
                <p>课程总数: <span class="status-value">{{ adminStats.totalCourses }}</span></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { statisticsApi } from '@/api/statistics'
import { 
  Document, Collection, Upload, Monitor, User, 
  TrendCharts, Check, Clock, Setting, Reading,
  School, UserFilled, ChatDotRound, ArrowLeft,
  Tools, List, Edit
} from '@element-plus/icons-vue'
import MainLayout from '@/layouts/MainLayout.vue'

const router = useRouter()
const authStore = useAuthStore()

// 真实数据状态
const loading = ref(false)
const onlineUsers = ref(0)
const systemStatus = ref('正常')
const systemUptime = ref(0)
const systemMemory = ref(0)
const systemCpu = ref(0)

// 统计数据
const dashboardStats = ref({
  totalProblems: 0,
  totalSubmissions: 0,
  totalUsers: 0,
  totalCourses: 0,
  totalClasses: 0,
  totalAssignments: 0,
  successRate: 0,
  onlineUsers: 0,
  recentSubmissions: 0,
  pendingSubmissions: 0
})

const userStats = ref({
  mySubmissions: 0,
  completedAssignments: 0,
  pendingAssignments: 0,
  mySuccessRate: 0,
  myCourses: 0,
  myClasses: 0
})

const teacherStats = ref({
  myCourses: 0,
  myProblems: 0,
  pendingSubmissions: 0,
  studentCount: 0,
  myAssignments: 0,
  myClasses: 0
})

const adminStats = ref({
  totalProblems: 0,
  totalSubmissions: 0,
  totalUsers: 0,
  totalCourses: 0,
  totalClasses: 0,
  totalAssignments: 0,
  successRate: 0,
  onlineUsers: 0,
  systemStatus: '正常',
  recentActivities: 0
})

// 定时器
let statsTimer: number | null = null
let onlineUsersTimer: number | null = null

// 获取当前时间
const getCurrentTime = () => {
  return new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 根据用户角色获取统计数据（使用真实数据）
const userStatsDisplay = computed(() => {
  const role = authStore.user?.role
  
  if (role === 'student') {
    return [
      {
        key: 'my-submissions',
        label: '我的提交',
        value: userStats.value.mySubmissions.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Upload',
        iconClass: 'icon-blue',
        cardClass: 'stat-card-blue'
      },
      {
        key: 'completed-homeworks',
        label: '已完成作业',
        value: userStats.value.completedAssignments.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'List',
        iconClass: 'icon-green',
        cardClass: 'stat-card-green'
      },
      {
        key: 'pending-homeworks',
        label: '待完成作业',
        value: userStats.value.pendingAssignments.toString(),
        trend: '实时数据',
        trendClass: 'trend-down',
        trendIcon: 'TrendCharts',
        icon: 'Clock',
        iconClass: 'icon-orange',
        cardClass: 'stat-card-orange'
      },
      {
        key: 'my-success-rate',
        label: '我的通过率',
        value: `${userStats.value.mySuccessRate}%`,
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Check',
        iconClass: 'icon-purple',
        cardClass: 'stat-card-purple'
      }
    ]
  } else if (role === 'teacher') {
    return [
      {
        key: 'my-courses',
        label: '我的课程',
        value: teacherStats.value.myCourses.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Reading',
        iconClass: 'icon-blue',
        cardClass: 'stat-card-blue'
      },
      {
        key: 'my-problems',
        label: '我的题目',
        value: teacherStats.value.myProblems.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Tools',
        iconClass: 'icon-green',
        cardClass: 'stat-card-green'
      },
      {
        key: 'pending-submissions',
        label: '待批改提交',
        value: teacherStats.value.pendingSubmissions.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Upload',
        iconClass: 'icon-orange',
        cardClass: 'stat-card-orange'
      },
      {
        key: 'student-count',
        label: '学生总数',
        value: teacherStats.value.studentCount.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'User',
        iconClass: 'icon-purple',
        cardClass: 'stat-card-purple'
      }
    ]
  } else if (role === 'admin') {
    return [
      {
        key: 'total-problems',
        label: '题目总数',
        value: adminStats.value.totalProblems.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Tools',
        iconClass: 'icon-blue',
        cardClass: 'stat-card-blue'
      },
      {
        key: 'total-submissions',
        label: '提交总数',
        value: adminStats.value.totalSubmissions.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Upload',
        iconClass: 'icon-green',
        cardClass: 'stat-card-green'
      },
      {
        key: 'total-users',
        label: '用户总数',
        value: adminStats.value.totalUsers.toString(),
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'User',
        iconClass: 'icon-orange',
        cardClass: 'stat-card-orange'
      },
      {
        key: 'success-rate',
        label: '通过率',
        value: `${adminStats.value.successRate}%`,
        trend: '实时数据',
        trendClass: 'trend-up',
        trendIcon: 'TrendCharts',
        icon: 'Check',
        iconClass: 'icon-purple',
        cardClass: 'stat-card-purple'
      }
    ]
  }

  return []
})

// 导航菜单
const navigationItems = computed(() => {
  const role = authStore.user?.role
  const baseItems = [
    {
      key: 'problems',
      title: '题目管理',
      description: '查看和管理题目',
      icon: 'Tools',
      iconClass: 'icon-blue'
    },
    {
      key: 'submissions',
      title: '提交记录',
      description: '查看提交历史',
      icon: 'Upload',
      iconClass: 'icon-orange'
    },
    {
      key: 'assistant',
      title: 'AI助手',
      description: '智能问答和代码审查',
      icon: 'ChatDotRound',
      iconClass: 'icon-purple'
    }
  ]

  if (role === 'student') {
    return [
      {
        key: 'homeworks',
        title: '我的作业',
        description: '查看待完成的作业',
        icon: 'List',
        iconClass: 'icon-blue'
      },
      {
        key: 'courses',
        title: '我的课程',
        description: '查看我的课程',
        icon: 'Reading',
        iconClass: 'icon-green'
      },
      {
        key: 'classes',
        title: '我的班级',
        description: '查看我的班级',
        icon: 'School',
        iconClass: 'icon-purple'
      },
      {
        key: 'submissions',
        title: '我的提交',
        description: '查看我的提交记录',
        icon: 'Upload',
        iconClass: 'icon-orange'
      },
      {
        key: 'problems',
        title: '题目练习',
        description: '练习编程题目',
        icon: 'Tools',
        iconClass: 'icon-red'
      }
    ]
  } else if (role === 'teacher') {
    return [
      {
        key: 'problems',
        title: '题目管理',
        description: '创建和管理题目',
        icon: 'Tools',
        iconClass: 'icon-blue'
      },
      {
        key: 'homeworks',
        title: '作业管理',
        description: '创建和管理作业',
        icon: 'List',
        iconClass: 'icon-green'
      },
      {
        key: 'courses',
        title: '课程管理',
        description: '创建和管理课程',
        icon: 'Reading',
        iconClass: 'icon-purple'
      },
      {
        key: 'classes',
        title: '班级管理',
        description: '创建和管理班级',
        icon: 'School',
        iconClass: 'icon-orange'
      },
      {
        key: 'student-management',
        title: '学生管理',
        description: '管理学生账号',
        icon: 'User',
        iconClass: 'icon-red'
      },
      {
        key: 'submissions',
        title: '提交记录',
        description: '查看学生提交',
        icon: 'Document',
        iconClass: 'icon-cyan'
      }
    ]
  } else if (role === 'admin') {
    return [
      {
        key: 'problems',
        title: '题目管理',
        description: '管理所有题目',
        icon: 'Tools',
        iconClass: 'icon-blue'
      },
      {
        key: 'homeworks',
        title: '作业管理',
        description: '管理所有作业',
        icon: 'List',
        iconClass: 'icon-green'
      },
      {
        key: 'courses',
        title: '课程管理',
        description: '管理所有课程',
        icon: 'Reading',
        iconClass: 'icon-purple'
      },
      {
        key: 'classes',
        title: '班级管理',
        description: '管理所有班级',
        icon: 'School',
        iconClass: 'icon-orange'
      },
      {
        key: 'teacher-management',
        title: '教师管理',
        description: '管理教师账号',
        icon: 'User',
        iconClass: 'icon-red'
      },
      {
        key: 'system-logs',
        title: '系统日志',
        description: '查看系统活动',
        icon: 'Monitor',
        iconClass: 'icon-cyan'
      }
    ]
  }

  return baseItems
})

// 快速操作
const quickActions = computed(() => {
  const role = authStore.user?.role
  const baseActions = [
    {
      key: 'problems',
      title: '题目管理',
      description: '查看和管理题目',
      icon: 'Tools',
      iconClass: 'icon-blue'
    },
    {
      key: 'homeworks',
      title: '作业管理',
      description: '查看和管理作业',
      icon: 'List',
      iconClass: 'icon-green'
    },
    {
      key: 'submissions',
      title: '提交记录',
      description: '查看提交历史',
      icon: 'Upload',
      iconClass: 'icon-orange'
    }
  ]

  if (role === 'student') {
    return [
      {
        key: 'my-homeworks',
        title: '我的作业',
        description: '查看待完成的作业',
        icon: 'List',
        iconClass: 'icon-blue'
      },
      {
        key: 'my-submissions',
        title: '我的提交',
        description: '查看我的提交记录',
        icon: 'Upload',
        iconClass: 'icon-green'
      },
      {
        key: 'problems',
        title: '题目练习',
        description: '练习编程题目',
        icon: 'Tools',
        iconClass: 'icon-orange'
      }
    ]
  } else if (role === 'teacher') {
    return [
      {
        key: 'create-problem',
        title: '创建题目',
        description: '创建新的编程题目',
        icon: 'Tools',
        iconClass: 'icon-blue'
      },
      {
        key: 'create-homework',
        title: '创建作业',
        description: '创建新的作业',
        icon: 'List',
        iconClass: 'icon-green'
      },
      {
        key: 'grade-submissions',
        title: '批改提交',
        description: '批改学生提交',
        icon: 'Upload',
        iconClass: 'icon-orange'
      }
    ]
  } else if (role === 'admin') {
    return [
      {
        key: 'create-problem',
        title: '添加题目',
        description: '创建新的编程题目',
        icon: 'Tools',
        iconClass: 'icon-blue'
      },
      {
        key: 'create-homework',
        title: '添加课程',
        description: '创建新的课程',
        icon: 'List',
        iconClass: 'icon-green'
      },
      {
        key: 'view-logs',
        title: '查看日志',
        description: '查看系统活动日志',
        icon: 'Monitor',
        iconClass: 'icon-orange'
      }
    ]
  }

  return baseActions
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    content: '提交了作业 "数据结构基础"',
    time: '2024-01-21 10:30:00',
    type: 'success',
    tag: '提交',
    tagType: 'success'
  },
  {
    id: 2,
    content: '完成了题目 "两数之和"',
    time: '2024-01-21 10:25:00',
    type: 'success',
    tag: '完成',
    tagType: 'success'
  },
  {
    id: 3,
    content: '创建了新题目 "排序算法"',
    time: '2024-01-21 10:20:00',
    type: 'primary',
    tag: '创建',
    tagType: 'primary'
  },
  {
    id: 4,
    content: '批改了学生提交的作业',
    time: '2024-01-21 10:15:00',
    type: 'warning',
    tag: '批改',
    tagType: 'warning'
  }
])

// 获取活动颜色
const getActivityColor = (type: string) => {
  const colorMap: Record<string, string> = {
    success: '#67c23a',
    primary: '#409eff',
    warning: '#e6a23c',
    danger: '#f56c6c'
  }
  return colorMap[type] || '#909399'
}

// 处理导航
const handleNavigation = (navKey: string) => {
  switch (navKey) {
    case 'problems':
      router.push('/problems')
      break
    case 'homeworks':
      router.push('/homeworks')
      break
    case 'courses':
      router.push('/courses')
      break
    case 'classes':
      // 根据用户角色跳转到不同的班级页面
      if (authStore.user?.role === 'student') {
        router.push('/student-class')
      } else {
        router.push('/classes')
      }
      break
    case 'submissions':
      router.push('/submissions')
      break
    case 'assignments':
      router.push('/assignments')
      break
    case 'student-management':
      router.push('/student-management')
      break
    case 'teacher-management':
      router.push('/teacher-management')
      break
    case 'system-logs':
      router.push('/system-logs')
      break
    case 'assistant':
      router.push('/ai-assistant')
      break
    default:
      router.push(`/${navKey}`)
  }
}

// 处理快速操作
const handleQuickAction = (actionKey: string) => {
  switch (actionKey) {
    case 'problems':
      router.push('/problems')
      break
    case 'my-homeworks':
      router.push('/student-assignments')
      break
    case 'homeworks':
      router.push('/homeworks')
      break
    case 'create-homework':
      // 根据用户角色决定跳转路径
      if (authStore.user?.role === 'admin') {
        router.push('/courses')
      } else {
        router.push('/homeworks')
      }
      break
    case 'submissions':
    case 'my-submissions':
    case 'grade-submissions':
      router.push('/submissions')
      break
    case 'create-problem':
      router.push('/problems?action=create')
      break
    case 'view-logs':
      router.push('/system-logs')
      break
    default:
      router.push(`/${actionKey}`)
  }
}

const getRoleText = (role?: string) => {
  const roleMap: Record<string, string> = {
    admin: '管理员',
    teacher: '教师',
    student: '学生'
  }
  return roleMap[role || ''] || '未知'
}

// 获取统计数据
const fetchStats = async () => {
  try {
    loading.value = true
    const role = authStore.user?.role
    
    if (role === 'student') {
      const response = await statisticsApi.getUserStats()
      userStats.value = response
    } else if (role === 'teacher') {
      const response = await statisticsApi.getTeacherStats()
      teacherStats.value = response
    } else if (role === 'admin') {
      const response = await statisticsApi.getAdminStats()
      adminStats.value = response
    }
    
    // 获取在线用户数
    const onlineResponse = await statisticsApi.getOnlineUsers()
    onlineUsers.value = onlineResponse.onlineUsers
    
    // 获取系统状态（仅管理员）
    if (role === 'admin') {
      const systemResponse = await statisticsApi.getSystemStatus()
      systemStatus.value = systemResponse.status
      systemUptime.value = systemResponse.uptime
      systemMemory.value = systemResponse.memory
      systemCpu.value = systemResponse.cpu
    }
    
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

// 定时更新数据
const startDataRefresh = () => {
  // 立即获取一次数据
  fetchStats()
  
  // 每30秒更新一次统计数据
  statsTimer = setInterval(fetchStats, 30000)
  
  // 每10秒更新一次在线用户数
  onlineUsersTimer = setInterval(async () => {
    try {
      const response = await statisticsApi.getOnlineUsers()
      onlineUsers.value = response.onlineUsers
    } catch (error) {
      console.error('获取在线用户数失败:', error)
    }
  }, 10000)
}

// 清理定时器
const clearTimers = () => {
  if (statsTimer) {
    clearInterval(statsTimer)
    statsTimer = null
  }
  if (onlineUsersTimer) {
    clearInterval(onlineUsersTimer)
    onlineUsersTimer = null
  }
}

onMounted(() => {
  startDataRefresh()
})

onUnmounted(() => {
  clearTimers()
})
</script>

<style scoped lang="scss">
.dashboard-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.3;
  }

  .welcome-info {
    flex: 1;
    z-index: 1;

    h1 {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 8px;
      color: white;
    }

    p {
      font-size: 1.1rem;
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.9);
    }

    .welcome-time {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .welcome-avatar {
    z-index: 1;
  }

  .test-mode-alert {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
  }
}

/* 通用样式 */
.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ecf0f1;
}

/* 导航菜单 */
.navigation-section {
  margin-bottom: 30px;

  .el-row {
    margin-bottom: 20px;
  }

  .nav-card {
    cursor: pointer;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .nav-content {
      display: flex;
      align-items: center;
      padding: 20px;
      gap: 15px;
    }

    .nav-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      flex-shrink: 0;

      &.icon-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
      &.icon-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
      &.icon-orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
      &.icon-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
      &.icon-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
      &.icon-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7); }
    }

    .nav-info {
      flex: 1;

      h3 {
        margin: 0 0 8px 0;
        color: #2c3e50;
        font-size: 1.2rem;
        font-weight: 600;
      }

      p {
        margin: 0;
        color: #7f8c8d;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }
  }
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 30px;

  .stat-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .stat-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px;
    }

    .stat-info {
      flex: 1;

      .stat-label {
        color: #7f8c8d;
        font-size: 0.9rem;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .stat-value {
        font-size: 2rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 8px;
        line-height: 1;
      }

      .stat-trend {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;

        &.trend-up {
          color: #27ae60;
        }

        &.trend-down {
          color: #e74c3c;
        }
      }
    }

    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;

      &.icon-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
      &.icon-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
      &.icon-orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
      &.icon-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
      &.icon-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
      &.icon-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7); }
    }
  }
}

/* 快速操作 */
.quick-actions-section {
  margin-bottom: 30px;

  .action-card {
    cursor: pointer;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 120px;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .action-content {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      height: 100%;

      .action-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        flex-shrink: 0;

        &.icon-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
        &.icon-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
        &.icon-orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
        &.icon-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
        &.icon-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7); }
      }

      .action-info {
        flex: 1;

        h3 {
          margin: 0 0 8px 0;
          color: #2c3e50;
          font-size: 1.1rem;
          font-weight: 600;
        }

        p {
          margin: 0;
          color: #7f8c8d;
          font-size: 0.9rem;
          line-height: 1.4;
        }
      }
    }
  }
}

/* 最近活动 */
.recent-activities-section {
  margin-bottom: 30px;

  .el-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .activity-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    .activity-text {
      flex: 1;
      color: #2c3e50;
    }
  }
}

/* 系统状态 */
.system-status-section {
  .status-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #ecf0f1;

      h3 {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
      }
    }

    .status-content {
      p {
        margin: 8px 0;
        color: #7f8c8d;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .status-value {
          color: #2c3e50;
          font-weight: 600;
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 10px;
  }

  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 20px;

    .welcome-info {
      h1 {
        font-size: 1.5rem;
      }
    }
  }

  .stats-section {
    .el-col {
      margin-bottom: 20px;
    }
  }

  .quick-actions-section {
    .el-col {
      margin-bottom: 20px;
    }
  }

  .system-status-section {
    .el-col {
      margin-bottom: 20px;
    }
  }
}

@media (max-width: 480px) {
  .welcome-section {
    padding: 20px;

    .welcome-info {
      h1 {
        font-size: 1.3rem;
      }

      p {
        font-size: 1rem;
      }
    }
  }

  .stat-card {
    .stat-content {
      padding: 15px;
    }

    .stat-info {
      .stat-value {
        font-size: 1.5rem;
      }
    }

    .stat-icon {
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
    }
  }

  .action-card {
    height: 100px;

    .action-content {
      padding: 15px;

      .action-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
      }

      .action-info {
        h3 {
          font-size: 1rem;
        }

        p {
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>
